<template>
  <div>
    <el-dialog
      title="添加包裹"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
      >
        <el-form-item label="包裹名称：">
          <el-input style="width: 300px;" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="快递公司：">
          <el-input style="width: 300px;" v-model="form.company"></el-input>
        </el-form-item>
        <el-form-item label="快递单号：">
          <el-input style="width: 300px;" v-model="form.number"></el-input>
        </el-form-item>
        
      </el-form>
      <span
          slot="footer"
        >
          <el-button
            type="primary"
            @click="cannel"
          >取消</el-button>
          <el-button
            type="primary"
            @click="makesure"
          >确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name:'addPackage',
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: false,
            form: {
                name: '',
                company: '',
                number: ''
            }
        }
    },
    watch: {
        visible:{
            handler(val){
                this.dialogVisible = val;
            },
            immediate: true,
            deep: true
        }
            
    },
    methods: {
        handleClose() {
            this.$refs.form.resetFields();
            this.$emit('close-dialog',false);
        },
        addPackage() {
            this.$emit('add-package', this.form);
            this.$emit('close-dialog',false);
        },
        makesure(){
            console.log(this.form);
            this.$emit('get', this.form);
            this.form.company = '';
            this.form.name = '';
            this.form.number = '';
            console.log(this.form);
            this.$emit('close-dialog',false);
        },
        cannel(){
           this.$emit('close-dialog',false);
        }
    }

}
</script>

<style>
</style>